<eda-dialog [inject]="dialog">

    <div body>
        <ng-container *ngIf="params?.isnew">
            <ng-container *ngTemplateOutlet="filterTemplate;"></ng-container>
        </ng-container>
        <ng-container *ngIf="!params?.isnew">
            <ng-container *ngTemplateOutlet="filtersTemplate;"></ng-container>
        </ng-container>
    </div>

    <div footer>
        <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix text-right">
            <button id="saveFilterButton" type="submit" pButton (click)="saveGlobalFilter()" i18n-label="@@guardarBtn"
                label="Confirmar" icon="fa fa-check" class="p-button-raised p-button-success" [disabled]="confirmDisabled()"></button>
            <button type="button" pButton (click)="closeDialog()" class="p-button-raised p-button-danger"
                i18n-label="@@cancelarBtn" label="Cancelar"></button>
        </div>
    </div>
</eda-dialog>


<ng-template #filterTemplate>
    <p-card >
        <div class="grid">
            <div class="col-12">
                <div class="grid">
                    <div class="col-4">
                        <div class="filterDialogTitles">{{header1}}</div>
                        <p-inputSwitch id="applyToAllFiltersButton" (onChange)="applyToAllCheck()" [(ngModel)]="switchChecked"></p-inputSwitch>
                    </div>
                    <div class="col-4">
                    </div>
                    <div class="col-4">
                        <div  i18n-title="@@filterVisibleScope" title="Definir la visibilidad del filtro. Público: todos pueden usarlo.  Deshabilitado: El resto de usuarios pueden ver el filtro pero no pueden modificarlo.  Oculto: El resto de usuario no pueden ver el filtro. Pero se les aplica" class="filterDialogTitles">{{header4}}</div>
                        <p-dropdown id="applyToOneFilterDropdown" 
                        i18n-title="@@filterVisibleScope" title="Definir la visibilidad del filtro. Público: todos pueden usarlo.  Deshabilitado: El resto de usuarios pueden ver el filtro pero no pueden modificarlo.  Oculto: El resto de usuarios no pueden ver el filtro, pero se les aplica"
                        [options]="publicRoHidden" [(ngModel)]="publicRoHiddenOption" selected="publicRoHiddenOption" autoWidth="false"></p-dropdown>
                    </div>
                </div>
            </div>
        </div>
    </p-card>

    <div style="margin: 1rem;"></div>

    <p-card *ngIf="!switchChecked" [header]="header2">
        <div class="grid">
            <div class="col-12">
                <ng-container *ngFor="let panel of panelsToDisplay">
                    <button type="button" pButton class="ui-button" style="margin-right: 0.5rem;"
                    [ngClass]="{'ui-button-selected': panel.active, 'ui-button-unselected':!panel.active, 'ui-button-unvaliable':!panel.avaliable}"
                    (click)="addPanelToFilter(panel)" label={{panel.title}}>
                </button>
                </ng-container>


            <div style="margin-top: 1rem;">
                <span style="margin: 0.5rem;" class="dotgreen"></span>
                <span style="margin-right: 2rem;">{{greendot}}</span>

                <span style="margin: 0.5rem;" class="dotred"></span>
                <span style="margin-right: 2rem;">{{reddot}}</span>

                <span style="margin: 0.5rem;" class="dotunselected"></span>
                <span style="margin-right: 2rem;">{{unselecteddot}}</span>
            </div>

            </div>
        </div>
    </p-card>

    <div style="margin: 1rem;"></div>
    <p-card [header]="header3" id="anywhereClick">
        <div class="grid">
            <div class="col-12">
                <br>

                <div class="grid">

                    <div class="col-3">
                        <p-dropdown id="selectFilerTable" [options]="targetTables" [(ngModel)]="targetTable"
                            filter="true" optionLabel="label" [style]="{'width': '100%'}"
                            i18n-placeholder="@@placeholderTables" placeholder="Entidades"
                            (onChange)="getColumnsByTable()" (onChange)="resetSelectedValues()" appendTo="body">
                        </p-dropdown>
                    </div>

                    <div class="col-3">
                        <p-dropdown id="selectFilterColumn" [options]="targetCols" [(ngModel)]="targetCol"
                            filter="true" optionLabel="label" [style]="{'width': '100%'}"
                            i18n-placeholder="@@placeholderColumns" placeholder="Atributos"
                            (onChange)="loadGlobalFiltersData()" (onChange)="resetSelectedValues()" appendTo="body">
                        </p-dropdown>
                    </div>

                    <div class="col-3" >
                        <input class = "d-flex justify-content-center" type="text" pInputText id="aliasName"
                        [style]="{'vertical-align' : 'bottom', width: '100%' }"
                        *ngIf="targetCol" [(ngModel)]="aliasValue" placeholder="Alias del filtro (opcional)"
                        i18n-placeholder="@@aliasValuePh"
                        />
                    </div>

                    <div class="col-3">
                        <p-multiSelect id="selectFilterValue" class='eda-filter-multiselect'
                            *ngIf=" targetCol && targetCol.value.column_type !== 'date'" [options]="targetValues"
                            [(ngModel)]="selectedValues" [virtualScroll]="true" itemSize="30" display="chip"
                            [style]="{'vertical-align' : 'bottom', width: '100%' }"
                            [panelStyle]="{minWidth:'15em'}" maxSelectedLabels="1" defaultLabel="Valor por defecto" appendTo="body">
                        </p-multiSelect>

                        <eda-date-picker #myCalendar
                            *ngIf="targetCol && targetCol.value.column_type === 'date'"
                            [autoClear]="true"
                            [inject]="datePickerConfigs[selectedFilter?.id]"
                            (onDatesChanges)="processPickerEvent($event)">
                        </eda-date-picker>
                    </div>

                </div>

            </div>
        </div>
    </p-card>
</ng-template>

<ng-template #filtersTemplate>


    <ng-container *ngIf="selectedFilter && !selectedFilter?.isdeleted">
        <p-card [header]="selectedFilter.table?.label + ' -' + selectedFilter.column?.label">
            <ng-container *ngTemplateOutlet="filterTemplate;"></ng-container>
        </p-card>
    </ng-container>
    <div class="col-12 pl-2">
        <p-card  [header]="posicion" >
            <div cdkDropList cdkDropListOrientation="horizontal" class="select-list" [cdkDropListData]="filtersList" (cdkDropListDropped)="onReorderFilter($event)">
                <ng-container *ngFor="let filter of filtersList">
                    <div *ngIf="!filter.isdeleted" class="select-box col-3 col-md-2 p-1" cdkDrag>
                        <span class="close-thin pointer" (click)="removeFilter(filter, 'select')"></span>
            
                        <span class="text-center" [ngClass]="(selectedFilter?.table==filter?.table) && (selectedFilter.column.label==filter.column.label)?'edaEmfasis':''">
                            {{filter.column.label}}
                        </span>
                    </div>
                </ng-container>
            </div>
        </p-card>
    </div>
</ng-template>